<template>
   <div class="person">
     <h1>情况3:监视reactive定义的对象数据类型</h1>
     <h2>姓名:{{person.name}}</h2>
     <H2>年龄:{{person.age}}</H2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="changePerson">修改人信息</button>
     <hr>
     <h2>测试{{obj.a.b.c}}</h2>
     <button @click="changeTest">修改测试</button>
   </div>
</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref
 * 若需要永固一个响应式对象层级不深ref，reactive都可以
 * 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {watch,ref,reactive,toRefs,toRef,computed} from "vue";

function changeTest(){
  obj.a.b.c=888
}

let obj=reactive({
  a:{
    b:{
      c:666
    }
  }
})
//响应式数据
let person=reactive({
  name:'罗佳维',
  age:19
})
//方法
function changeName(){
person.name+='!'
}
function changeAge(){
person.age+=1
}

function changePerson(){
  // person={name: '里斯',age: 200}
  Object.assign(person,{name:'看四',age:80})
}
//监视 情况三 监视reactive定义的对象类型数据 默认开启深度监视 无法关闭deep:false也不行
watch(person,(newValue,oldValue)=>{
  console.log('person变化',newValue,oldValue)
})
//new &old 地址值没变

watch(obj,(newValue,oldValue)=>{
  console.log('Obj变化了',newValue,oldValue)
})

</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>